import './index.scss'
import { Layout, theme } from 'antd'
import MyMenu from '../../component/navLeft'
import MyBreadcrumb from '../../component/breadCrumb'
import MyHeader from '../../component/header'
import { Outlet } from 'react-router-dom'

const { Header, Sider } = Layout

export default function Home() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()
  return (
    <>
      <Layout>
        <Sider width={200} className="sider">
          <MyMenu />
        </Sider>
        <Layout>
          <Header
            style={{
              padding: 0,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
              paddingRight: 20,
              textAlign: 'right',
            }}
          >
            <MyHeader />
          </Header>
          <Layout style={{ padding: '0 24px 24px' }}>
            <MyBreadcrumb />
            <Outlet />
          </Layout>
        </Layout>
      </Layout>
    </>
  )
}
